<script setup lang="ts">
// 支付频次分布
import {SycmBrandLists} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";

const props = defineProps({
  data: {
    type: Object as PropType<SycmBrandLists>,
  },
  date: {
    type: String,
  },
})
const dataSource = ref<any[]>([])
const columns = [
  {
    dataIndex: 'brand.name',
    title: '品牌名称',
    sorter: (a: any, b: any) => a.brand.name - b.brand.name,
    width: 200,
    dataType: 'brand',
    dataField: {
      brand_name: 'brand.name',
      brand_logo: 'brand.picUrl',
    }
  },
  {
    dataIndex: 'type',
    title: '类别',
    sorter: (a: any, b: any) => a.type - b.type,
    dataType: 'custom',
    slot: 'type'
  },
  {
    dataIndex: 'date',
    title: '日期',
    sorter: (a: any, b: any) => a.date - b.date,
  },
  {
    dataIndex: 'name',
    title: '类目偏好',
    sorter: (a: any, b: any) => a.name - b.name,
  },
  {
    dataIndex: 'value',
    title: '偏好人数',
    sorter: (a: any, b: any) => a.value - b.value,
  }
]
const calcDataSource = () => {
  if (props.data.brand1 && props.data.brand1.BuyerPreference) {
    dataSource.value = props.data.brand1.BuyerPreference.categoryData.map((item: any) => {
      return {
        ...item,
        date: props.date,
        brand: props.data.brand1,
        type: '品牌1'
      }
    })
  }
  if (props.data.brand2 && props.data.brand2.BuyerPreference) {
    dataSource.value = dataSource.value.concat(props.data.brand2.BuyerPreference.categoryData.map((item: any) => {
      return {
        ...item,
        date: props.date,
        brand: props.data.brand2,
        type: '品牌2'
      }
    }))
  }
  if (props.data.brand3 && props.data.brand3.BuyerPreference) {
    dataSource.value = dataSource.value.concat(props.data.brand3.BuyerPreference.categoryData.map((item: any) => {
      return {
        ...item,
        date: props.date,
        brand: props.data.brand3,
        type: '品牌3'
      }
    }))
  }
  // if (props.data.brand2 && props.data.brand2.PaymentPreference) {
  //   dataSource.value = dataSource.value.concat(props.data.brand2.PaymentPreference.pay_cnt.map((item: any) => {
  //     return {
  //       ...item,
  //       date: props.date,
  //       brand: props.data.brand2,
  //       type: '品牌2'
  //     }
  //   }))
  // }
  // if (props.data.brand3 && props.data.brand3.PaymentPreference) {
  //   dataSource.value = dataSource.value.concat(props.data.brand3.PaymentPreference.pay_cnt.map((item: any) => {
  //     return {
  //       ...item,
  //       date: props.date,
  //       brand: props.data.brand3,
  //       type: '品牌3'
  //     }
  //   }))
  // }
  // dataSource.value = props.data?.pay_cntData.data?.map((item: any) => {
  //   return {
  //     ...item,
  //     date: props.date,
  //   }
  // })
}
watch(() => props.data, () => {
  calcDataSource()
}, {
  deep: true
})
onMounted(() => {
  calcDataSource()
})
watch(() => props.date, () => {
  calcDataSource();
})
</script>

<template>
  <base-table :scroll="{
    x: 500,
    y: 650
  }" :columns="columns" :data-source="dataSource" table-name="市场-行业客群-购买偏好-支付频次分布"
  >
    <template #type="record">
      <a-tag color="green" v-if="record.type==='品牌1'">
        品牌1
      </a-tag>
      <a-tag color="purple" v-else-if="record.type==='品牌2'">
        品牌2
      </a-tag>
      <a-tag color="orange" v-else-if="record.type==='品牌3'">
        品牌3
      </a-tag>
    </template>
  </base-table>
</template>

<style scoped>

</style>
